<template>
    <div>
        <!-- 以下为条件查询区域 -->
        <el-form ref="searchForm" :model="searchForm">
            <el-form-item label="所在省" prop="provinceId">
                    <el-select placeholder="请选择省份" v-model="searchForm.provinceId" @change="searchCity(searchForm.provinceId)">
                        <el-option v-for="item in location.province" :key="item.id" 
                        :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            <el-form-item label="所在市" prop="cityId">
                <el-select placeholder="请选择城市" v-model="searchForm.cityId" @change="searchArea(searchForm.cityId)">
                    <el-option v-for="item in location.city" :key="item.id" 
                    :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所在区" prop="areaId">
                <el-select placeholder="请选择区域" v-model="searchForm.areaId">
                    <el-option v-for="item in location.area" :key="item.id" 
                    :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="方式" prop="rentMode">
                <template>
                    <el-radio v-model="searchForm.rentMode">不限</el-radio>
                    <el-radio v-model="searchForm.rentMode" label="1">整租</el-radio>
                    <el-radio v-model="searchForm.rentMode" label="2">合租</el-radio>
                </template>
            </el-form-item>
            <el-form-item label="租金" prop="rentalList">
                <template>
                    <el-checkbox-group v-model="searchForm.rentalList">
                        <el-checkbox label="0-1000">&#60;=1000元</el-checkbox>
                        <el-checkbox label="1000-1500">1000-1500元</el-checkbox>
                        <el-checkbox label="2000-2500">2000-2500元</el-checkbox>
                        <el-checkbox label="2500-3000">2500-3000元</el-checkbox>
                        <el-checkbox label="3000-5000">3000-5000元</el-checkbox>
                        <el-checkbox label="5000-100000">&#62;5000元</el-checkbox>
                    </el-checkbox-group>
                </template>
            </el-form-item>
            <el-form-item label="户型" prop="houseTypeList">
                <template>
                    <el-checkbox-group v-model="searchForm.houseTypeList">
                        <el-checkbox label="1">一居</el-checkbox>
                        <el-checkbox label="2">两居</el-checkbox>
                        <el-checkbox label="3">三居</el-checkbox>
                        <el-checkbox label="4">四居及以上</el-checkbox>
                    </el-checkbox-group>
                </template>
            </el-form-item>
            <el-form-item label="朝向" prop="orientationList">
                <template>
                    <el-checkbox-group v-model="searchForm.orientationList">
                        <el-checkbox label="1">东</el-checkbox>
                        <el-checkbox label="2">南</el-checkbox>
                        <el-checkbox label="3">西</el-checkbox>
                        <el-checkbox label="4">北</el-checkbox>
                    </el-checkbox-group>
                </template>
            </el-form-item>
            <el-form-item>
                <el-button @click="resetForm('searchForm')">重置</el-button>
                <el-button type="primary" @click="fetchData">查询</el-button>
                <el-button type="primary" @click="handleAdd">导入</el-button>
            </el-form-item>
        </el-form>
        <br>
        <hr>
        <br>
        <!-- 以下为房源展示区域 -->
        <el-table :data="houseList" stripe height="400" highlight-current-row border>
            <el-table-column type="index" label="序号" width="60"></el-table-column>
            <el-table-column prop="areaName" label="所在区" width="100"></el-table-column>
            <el-table-column prop="rentModeName" label="方式" width="100"></el-table-column>
            <el-table-column prop="rental" label="租金（元）" width="110"></el-table-column>
            <el-table-column prop="houseTypeName" label="户型" width="80"></el-table-column>
            <el-table-column prop="orientationName" label="朝向" width="80"></el-table-column>
            <el-table-column prop="address" label="详细地址" ></el-table-column>
            <el-table-column prop="publishDate" label="发布时间"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>        
            </el-table-column>
        </el-table>
        <!-- 以下为分页模块 -->
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" 
        :total="total" :page-size="itemsPerPage" :page-sizes="[5,10,20]" :current-page="page"
        @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>
        <!-- 以下为房源导入模块（添加操作） -->
        <el-dialog :visible.sync="dialogVisible" title="房源导入">
            <el-form :model="addForm" :rules="addRules" ref="addForm"  class="demo-ruleForm">
                <el-form-item label="所在省" prop="provinceId">
                    <el-select placeholder="请选择省份" v-model="addForm.provinceId" @change="searchCity(addForm.provinceId)">
                        <el-option v-for="item in location.province" :key="item.id" 
                        :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在市" prop="cityId">
                    <el-select placeholder="请选择城市" v-model="addForm.cityId" @change="searchArea(addForm.cityId)">
                        <el-option v-for="item in location.city" :key="item.id" 
                        :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在区" prop="areaId">
                    <el-select placeholder="请选择区域" v-model="addForm.areaId">
                        <el-option v-for="item in location.area" :key="item.id" 
                        :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="方式" prop="rentMode">
                    <template>
                        <el-radio v-model="addForm.rentMode" label="1">整租</el-radio>
                        <el-radio v-model="addForm.rentMode" label="2">合租</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="租金" prop="rental">
                     <el-input v-model="addForm.rental"></el-input>
                </el-form-item>
                <el-form-item label="户型" prop="houseType">
                    <template>
                        <el-radio v-model="addForm.houseType" label="1">一居</el-radio>
                        <el-radio v-model="addForm.houseType" label="2">两居</el-radio>
                        <el-radio v-model="addForm.houseType" label="3">三居</el-radio>
                        <el-radio v-model="addForm.houseType" label="4">四居及以上</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="朝向" prop="orientation">
                    <template>
                        <el-radio v-model="addForm.orientation" label="1">东</el-radio>
                        <el-radio v-model="addForm.orientation" label="2">南</el-radio>
                        <el-radio v-model="addForm.orientation" label="3">西</el-radio>
                        <el-radio v-model="addForm.orientation" label="4">北</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                     <el-input type="textarea" v-model="addForm.address"></el-input>
                </el-form-item>
                <el-form-item label="发布时间" prop="publishDate">
                    <el-date-picker v-model="addForm.publishDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>                
                <el-form-item>
                    <el-button type="primary" @click="addData('addForm')">导入</el-button>
                    <el-button @click="dialogVisible=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 以下为编辑房源模块（修改） -->
        <el-dialog :visible.sync="dialogVisibleUpdate" title="房源编辑">
            <el-form :model="updateForm" :rules="addRules" ref="updateForm"  class="demo-ruleForm">    
                <el-form-item label="方式" prop="rentMode">
                    <template>
                        <el-radio v-model="updateForm.rentMode" label="1">整租</el-radio>
                        <el-radio v-model="updateForm.rentMode" label="2">合租</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="租金" prop="rental">
                     <el-input v-model="updateForm.rental"></el-input>
                </el-form-item>
                <el-form-item label="户型" prop="houseType">
                    <template>
                        <el-radio v-model="updateForm.houseType" label="1">一居</el-radio>
                        <el-radio v-model="updateForm.houseType" label="2">两居</el-radio>
                        <el-radio v-model="updateForm.houseType" label="3">三居</el-radio>
                        <el-radio v-model="updateForm.houseType" label="4">四居及以上</el-radio>
                    </template>
                </el-form-item>               
                <el-form-item>
                    <el-button type="primary" @click="updateData('updateForm')">修改</el-button>
                    <el-button @click="dialogVisible=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
    import HouseApi from '@/api/house'
  
    export default {
        data() {
            return {
                /* 条件查询双向绑定对象 */
                searchForm:{
                    provinceId:null,
                    cityId:null,
                    areaId:null,
                    rentMode:null,
                    houseTypeList:[],
                    orientationList:[],
                    rentalList:[],
                },
                /* 房源展示列表 */
                houseList:[],
                /* 房源导入（添加）双向绑定模块 */             
                addForm:{ 
                    provinceId:'',
                    cityId:'',
                    areaId:'',
                    rentMode:null,
                    rental:'',
                    houseType:null,
                    orientation:null,
                    address:'',
                    publishDate:'',
                    addname:'jiangchen',
                },
                /* 房源导入（添加）时验证规则 */
                addRules: { 
                    provinceId: [
                        { required: true, message: '请选择省份', trigger: 'change' },
                    ],
                    cityId:[
                        { required: true, message: '请选择城市', trigger: 'change' },
                    ],
                    areaId:[
                        { required: true, message: '请选择区域', trigger: 'change' },
                    ],
                    rentMode:[
                        { required: true, message: '请选择租房方式', trigger: 'change' },
                    ],
                    rental:[
                        { required: true, message: '租金不能为空', trigger: 'blur' },
                    ],
                    houseType:[
                        { required: true, message: '请选择户型', trigger: 'change' },
                    ],
                    orientation:[
                        { required: true, message: '请选择朝向', trigger: 'change' },
                    ],
                    address:[
                        { required: true, message: '地址不能为空', trigger: 'blur' },
                    ],
                    publishDate:[
                        { required: true, message: '请选择发布日期', trigger: 'change' },
                    ],
                },
                /* 以下为房源修改（编辑）的双向绑定数据 */
                updateForm:{
                    id:null,
                    rental:null,
                    houseType:null,
                    rentMode:null,
                },
                dialogVisible:false, //添加表单弹窗 
                dialogVisibleUpdate:false,//修改表单弹窗      
                location:{  // 省市区级联
                    province:this.searchProvince(),
                    city:[],
                    area:[],
                },  
                page:1, //当前页
                itemsPerPage:5,//每页记录数 
                total:0, //总记录数
            }
        },
        created(){
            this.fetchData()
        },
        methods: {
            resetForm(formName){ //表单重置
                this.$refs[formName].resetFields()
            },
            fetchData(){ //房源查询
                HouseApi.searchHouse(this.page,this.itemsPerPage,this.searchForm).then(response=>{
                    const resp = response.data
                    if(resp.flag){
                        this.total = resp.total
                        this.houseList = resp.data
                    }else{
                        this.$message({
                            message:resp.msg,
                            type:'warning'
                        })
                    }
                })
            },
            handleAdd(){ //点击添加按钮
                this.dialogVisible = true
                this.$nextTick(() => { 
                    this.$refs['addForm'].resetFields()
                })
            },
            addData(formName){ //添加房源
                this.$refs[formName].validate(valid=>{
                    if(valid){
                        HouseApi.addHouse(this.addForm).then(response=>{
                            console.log(response.data.flag,response.data.msg)
                            const resp = response.data
                            if(resp.flag){
                                this.$message({
                                    message:resp.msg,
                                    type:'success',
                                 })
                                this.fetchData()
                                this.dialogVisible = false
                            }else{
                                this.$message({
                                   message:resp.msg,
                                   type:'warning'
                                 })
                            }
                        })
                    }
                })
            },
            searchProvince(){ //查找省份
                HouseApi.searchLocation(0).then(response=>{
                    const resp = response.data
                    if(resp.flag){
                        this.location.province = resp.data
                    }
                })
            },
            searchCity(pid){ //查找城市
                HouseApi.searchLocation(pid).then(response=>{
                    const resp = response.data
                    if(resp.flag){
                        this.location.city = resp.data
                    }
                })                
            },
            searchArea(pid){ //查找区域
                HouseApi.searchLocation(pid).then(response=>{
                    const resp = response.data
                    if(resp.flag){
                        this.location.area = resp.data
                    }
                })                
            },
            handleSizeChange(val){ //切换当前页
                this.itemsPerPage = val
                this.fetchData()
            },
            handleCurrentChange(val){ //切换每页显示条数
                this.page = val
                this.fetchData()
            },
            handleEdit(id){ //点击修改
                this.dialogVisibleUpdate = true
                this.$nextTick(() => { 
                    this.$refs['updateForm'].resetFields()
                })
                HouseApi.findHouseById(id).then(response=>{
                    const resp = response.data
                    if(resp.flag){
                        this.updateForm= resp.data
                    }else{
                        this.$message({
                            message:resp.msg,
                            type:'error'
                        })
                    }
                })

            },
            updateData(formName){ //修改
                this.$refs[formName].validate(valid=>{
                    if(valid){
                        HouseApi.updateHouse(this.updateForm).then(response=>{
                            const resp = response.data
                            if(resp.flag){
                                this.$message({
                                    message:resp.msg,
                                    type:'success',
                                 })
                                this.fetchData()
                                this.dialogVisibleUpdate = false
                            }else{
                                this.$message({
                                message:resp.msg,
                                type:'error'
                                })
                            }
                        })
                        
                    }
                })
            },
            handleDelete(id){ //删除
                this.$confirm('确认删除这条记录吗？', '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                }).then(()=>{
                    HouseApi.deleteHouse(id).then(response=>{
                        const resp = response.data
                        if(resp.flag){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            this.fetchData()
                        }else{
                            this.$message({
                                message:resp.msg,
                                type:'error'
                            })
                        }
                    })
                })
            }

        },
    }
</script>

<style scoped>
    .el-form{
        background-color:#dddddd;
        padding:40px;
        border-radius: 50px;
        box-shadow:20px 20px 20px silver;
        font-weight:bolder;
    }
</style>